// 原内联脚本的内容
function initChart() {
    // 验证echarts和echarts-gl是否加载成功
    console.log("echarts是否加载：", typeof echarts !== "undefined");
    // console.log("echarts-gl是否加载：", typeof echarts.gl !== "undefined");

    // 获取容器
    const container = document.getElementById("chart-container");
    // 初始化echarts实例
    const chart = echarts.init(container);

    // 3D散点图配置
    // const option = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             data: [150, 230, 224, 218, 135, 147, 260],
    //             type: 'line'
    //         }
    //     ]
    // };

    const pieData = [
        { name: '直接访问', value: 335 },
        { name: '邮件营销', value: 310 },
        { name: '联盟广告', value: 234 },
        { name: '视频广告', value: 135 },
        { name: '搜索引擎', value: 1548 }
    ];
    // 计算总值
    const total = pieData.reduce((sum, item) => sum + item.value, 0);

    const option = {
        // 图表标题配置
        title: {
            text: '3D Pie Chart', // 标题文本
            left: 'center', // 标题的位置，这里是居中显示
            textStyle: {
                color: '#fff',
                fontSize: 18,
                align: 'center'
            }
        },
        // 提示框组件配置
        tooltip: {
            trigger: 'item' // 触发类型，这里设置为按数据项触发
        },
        // 图例组件配置
        legend: {
            orient: 'vertical', // 图例列表的方向，这里设置为垂直方向
            left: 'left', // 图例的位置，这里是左对齐
            data: pieData.map(item => item.name) // 图例的数据，这里是从pieData中映射出每个数据项的名字
        },
        // 三维直角坐标系中的x轴配置
        xAxis3D: {
            type: 'value' // 坐标轴类型，这里设置为数值轴
        },
        // 三维直角坐标系中的y轴配置
        yAxis3D: {
            type: 'value' // 坐标轴类型，这里设置为数值轴
        },
        // 三维直角坐标系中的z轴配置
        zAxis3D: {
            type: 'value' // 坐标轴类型，这里设置为数值轴
        },
        // 三维直角坐标系组件配置
        grid3D: {
            boxWidth: 200, // 三维箱子的宽度
            boxHeight: 200, // 三维箱子的高度
            boxDepth: 100, // 三维箱子的深度
            viewControl: {
                projection: 'orthographic' // 投影方式，这里设置为正交投影
            }
        },
        // 系列列表配置
        series: [
            {
                name: '3D Pie', // 系列名称
                // type: 'pie', // 系列类型，这里注释掉了因为我们要用'surface'来代替
                radius: ['40%', '70%'], // 饼图的内半径和外半径，这里设置为百分比，相对于容器高宽中较小的一个值的一半
                center: ['50%', '50%'], // 饼图的中心位置，这里设置为相对于容器的百分比
                data: pieData.map(item => ({ // 数据项数组
                    name: item.name, // 数据项的名字
                    value: item.value, // 数据项的值
                    startAngle: (item.value / total) * 360, // 起始角度，这里计算了一个假的起始角度，实际上ECharts会自动计算
                    endAngle: ((item.value + 1) / total) * 360 // 结束角度，这里也计算了一个假的结束角度
                })),
                itemStyle: {
                    color: function (params) { // 数据图形的颜色，这里使用了一个颜色数组并根据数据索引返回不同的颜色
                        const colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'];
                        return colors[params.dataIndex];
                    }
                },
                label: {
                    show: true, // 是否显示标签
                    position: 'inside', // 标签的位置，这里设置为内部
                    formatter: '{b}\n{d}%' // 标签内容格式化器，这里显示数据项名字和百分比
                },
                labelLine: {
                    show: true // 是否显示标签引导线
                },
                // 使用 surface 类型来创建3D效果
                type: 'surface', // 系列类型，这里设置为3D表面
                parametric: true, // 是否开启参数方程模式
                wireframe: {
                    show: false // 是否显示线框
                },
                parametricEquation: { // 参数方程配置，用于生成3D表面
                    u: {
                        min: 0, // 参数u的最小值
                        max: Math.PI * 2, // 参数u的最大值
                        step: Math.PI / 20 // 参数u的步长
                    },
                    v: {
                        min: 0, // 参数v的最小值
                        max: Math.PI * 2, // 参数v的最大值
                        step: Math.PI / 20 // 参数v的步长
                    },
                    x: function (u, v) { // x轴的参数方程
                        return Math.cos(u) * Math.sin(v);
                    },
                    y: function (u, v) { // y轴的参数方程
                        return Math.sin(u) * Math.sin(v);
                    },
                    z: function (u, v) { // z轴的参数方程
                        return Math.cos(v);
                    }
                }
            }
        ]
    };

    chart.setOption(option);
}

// 页面加载完成后初始化图表
// window.onload = initChart;

function checkWebGLInExtension() {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
    if (!gl) {
        console.error('扩展环境中WebGL不可用！');
        return false;
    }
    console.log('扩展环境中WebGL可用，版本：', gl.getParameter(gl.VERSION));
    return true;
}

// 在initChart前调用
window.onload = () => {
    if (checkWebGLInExtension()) {
        initChart();
    }
};